<template>
  <div class="modelListMain">
    <div class="headerBox flex align-center justify-between">
      <h3 class="flex align-center"><img src="/images/titleImg02.png" alt="">模型列表<span>全面展示平台内所有评估模型</span></h3>
      <a href="javascript:;" class="flex align-center">
        更多
        <i class="el-icon-d-arrow-right"></i>
      </a>
    </div>
    <div class="bodyBox">
      <div class="listBox clearfix">
        <div class="listItem" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
          <div class="outside">
            <div class="inner">
              <div class="img">
                <img :src="item.imageUrl" style="aspect-ratio: 540/304;" alt="">
              </div>
              <div class="text">
                <h3 class="ellipsis2">{{ item.name }}</h3>
                <p class="ellipsis">作者：{{ item.author }}</p>
                <div class="time ellipsis flex align-center justify-end">
                  审核时间：{{ item.auditTime ? parseTime(item.auditTime, '{y}-{m}-{d} {h}:{i}') : '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--暂无模型数据-->
      <div class="noDataBox flex align-center justify-center" v-if="list.length === 0">
        <el-empty description="暂无模型数据"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import {listBasicInfoForIndex} from '@/api/model/info';

export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getBasicInfoList();
  },
  mounted() {

  },
  methods: {
    async getBasicInfoList() {
      const {msg, code, data} = await listBasicInfoForIndex();
      if (code === 200) {
        this.list = [...data];
      }
    },
    toDetail(item) {
      this.$tab.openPage("模型详情", `/portalWebsite/modelDetail/${item.id}`);
    },
  },
}
</script>
<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.modelListMain {
  .headerBox {
    height: 70px;
    padding: 0 10px;

    h3 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
      margin-right: 40px;
      font-weight: bold;
      img{
        width: 30px;
        height: 30px;
        display: block;
        margin-right: 10px;
      }

      span {
        font-size: 14px;
        color: #9199a1;
        letter-spacing: .88px;
        line-height: 16px;
        font-weight: 400;
        margin-left: 28px;
        padding-top: 12px;
      }
    }

    a {
      font-size: 14px;
      color: #333;

      i {
        position: relative;
        top: 1px;
      }

      &:hover {
        color: #294098;

        i {
          color: #294098;
        }
      }
    }
  }

  .bodyBox {
    .listBox {
      .listItem {
        width: 20%;
        float: left;
        cursor: pointer;

        .outside {
          padding: 10px;

          .inner {
            background: #fff;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 6px 10px 0 rgba(95, 101, 105, .15);

            .img {
              overflow: hidden;

              img {
                width: 100%;
                aspect-ratio: auto;
                display: block;
                transition: all 0.2s;
              }
            }

            .text {
              padding: 10px 12px;
              height: 106px;
              position: relative;
              box-sizing: border-box;

              h3 {
                margin: 0;
                max-height: 36px;
                font-size: 16px;
                font-weight: 500;
                color: #545c63;
                line-height: 18px;
              }

              p {
                height: 12px;
                line-height: 12px;
                font-size: 12px;
                margin: 6px 0 0;
                color: #666;
              }

              .time {
                font-size: 12px;
                color: #666;
                position: absolute;
                left: 10px;
                right: 10px;
                bottom: 12px;
              }
            }
          }
        }

        &:hover {
          img {
            transform: scale(1.1);
          }

          h3 {
            color: #294098 !important;
          }
        }
      }
    }
  }
}

.noDataBox {
  height: 300px;
}
</style>
